<template>
  <div class="config-page">
    <div class="configTable">
      <el-table :data="configTable" style="width: 100%" size="large">
        <el-table-column prop="name" label="配置名称" align="center" header-align="center" width="100"/>
        <el-table-column prop="temperature" label="最高温度" align="center" header-align="center" width="110"/>
        <el-table-column prop="low_temp" label="最低温度" align="center" header-align="center" width="110"/>
        <el-table-column prop="tempTime" label="温度启动时间" align="center" header-align="center" width="200">
          <template #default="scope">
            <el-icon color="#409EFF"><clock /></el-icon>开始：{{scope.row.tem_start_time}}
            <br>
            <el-icon color="#F56C6C"><clock /></el-icon>结束：{{scope.row.tem_end_time}}
          </template>
        </el-table-column>
        <el-table-column prop="fire" label="火焰预警值" align="center" header-align="center" width="110"/>
        <el-table-column prop="fire_grade" label="火警等级" align="center" header-align="center" width="110"/>
        <el-table-column prop="fireTime" label="火焰时间" align="center" header-align="center" width="200">
          <template #default="scope">
            <el-icon color="#409EFF"><clock /></el-icon>开始：{{scope.row.fire_start_time}}
            <br>
            <el-icon color="#F56C6C"><clock /></el-icon>结束：{{scope.row.fire_end_time}}
          </template>
        </el-table-column>
        <el-table-column prop="smoke" label="烟雾预警值" align="center" header-align="center" width="110"/>
        <el-table-column prop="smokeTime" label="烟雾时间" align="center" header-align="center" width="200">
          <template #default="scope">
            <el-icon color="#409EFF"><clock /></el-icon>开始：{{scope.row.smoke_start_time}}
            <br>
            <el-icon color="#F56C6C"><clock /></el-icon>结束：{{scope.row.smoke_end_time}}
          </template>
        </el-table-column>
        <el-table-column prop="is_light" label="是否启动光敏" align="center" header-align="center" width="120">
          <template #default="scope">
            <span v-if="scope.row.is_light"><el-icon color="#67C23A"><circle-check-filled /></el-icon></span>
            <span v-if="!scope.row.is_light"><el-icon color="#F56C6C"><circle-close-filled /></el-icon></span>
          </template>
        </el-table-column>
        <el-table-column prop="light" label="灯光值" align="center" header-align="center" width="110"/>
        <el-table-column prop="lightTime" label="灯光时间" align="center" header-align="center" width="200">
          <template #default="scope">
            <el-icon color="#409EFF"><clock /></el-icon>开始：{{scope.row.light_start_time}}
            <br>
            <el-icon color="#F56C6C"><clock /></el-icon>结束：{{scope.row.light_end_time}}
          </template>
        </el-table-column>
        <el-table-column prop="is_camera" label="是否启动抓拍" align="center" header-align="center" width="120">
          <template #default="scope">
            <span v-if="scope.row.is_camera"><el-icon color="#67C23A"><circle-check-filled /></el-icon></span>
            <span v-if="!scope.row.is_camera"><el-icon color="#F56C6C"><circle-close-filled /></el-icon></span>
          </template>
        </el-table-column>
        <el-table-column prop="camTime" label="摄像头启动时间" align="center" header-align="center" width="200">
          <template #default="scope">
            <el-icon color="#409EFF"><clock /></el-icon>开始：{{scope.row.camera_start_time}}
            <br>
            <el-icon color="#F56C6C"><clock /></el-icon>结束：{{scope.row.camera_end_time}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="240"  align="center" header-align="center">
          <template #default="scope">
            <el-button size="small" type="primary" @click="configClick(scope.$index, scope.row)">配置</el-button>
            <el-button size="small" type="danger" @click="deleteClick(scope.$index, scope.row)">删除</el-button>
            <el-button v-if="scope.row.is_now" size="small" type="info" @click="startClick(scope.$index, scope.row)">关闭</el-button>
            <el-button v-if="!scope.row.is_now" size="small" type="success" @click="startClick(scope.$index, scope.row)">启动</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="addBtn">
        <el-button type="primary" @click="addConfig"><el-icon><plus /></el-icon>新增</el-button>
      </div>
    </div>
    <el-dialog title="决策配置条目" v-model="dialogFormVisible" :before-close="cancelConfig">
      <config-detail v-if="dialogFormVisible" :config-detail="rowData" :option="option" @complete="completeConfig"></config-detail>
    </el-dialog>
  </div>
</template>

<script>
import configDetail from "@/pages/configuration/configDetail";
import {getDateFormat} from "@/utils/formatDateUtils";
import {getConfigInfoList, sendRemoveConfig, sendStartConfig, showMessage} from "@/utils/displayUtils";
import {mapGetters} from "vuex";

export default {
  name: "index",
  components: {
    configDetail
  },
  computed: {
    ...mapGetters(['loginStatus','username','password','email','roleId','uid'])
  },
  data() {
    return {
      configTable: [
        {
          sid: 0,
          name: '配置一',
          is_now: true,
          temperature: '',
          low_temp: '',
          tem_start_time: null,
          tem_end_time: null,
          fire: null,
          fire_start_time: null,
          fire_end_time: null,
          smoke: null,
          smoke_start_time: null,
          smoke_end_time: null,
          fire_grade: null,
          is_light: true,
          light: null,
          light_start_time: null,
          light_end_time: null,
          is_camera: null,
          camera_start_time:null,
          camera_end_time: null
        }
      ],
      rowData:{},
      dialogFormVisible: false,
      option: 'edit',
      nowOptionIndex: '',
    }
  },
  mounted() {
    this.getConfigList()
  },
  methods: {
    getConfigList: function () {
      getConfigInfoList(this.uid).then((data) => {
        this.configTable = data.data_list
        showMessage(this,'获取配置成功','warning')
      }).catch((error) => {

      })
    },
    configClick: function (index,row) {
      this.option = 'edit'
      this.dialogFormVisible = true
      this.rowData = row
      this.nowOptionIndex = index
      console.log(row)
    },
    deleteClick: function (index,row) {
      console.log('删除',index,row)
    //  todo 调用删除数据的api并更新表格,这里是本地修改
      sendRemoveConfig(row.sid).then((data) => {
        if (data.code == '200'){
          showMessage(this,data.msg,'success')
          this.getConfigList()
        } else {
          showMessage(this,data.msg,'warning')
        }
      }).catch((error) => {

      })
    },
    startClick: function (index,row) {
      console.log('一键启动',index,row)
    //  todo 调用启动配置api，需要添加是否启动的判断，给每一个配置设置一个字段
      sendStartConfig(row.sid).then((data) => {
        if (data.code == '200'){
          showMessage(this,data.msg,'success')
          this.getConfigList()
        } else {
          showMessage(this,data.msg,'warning')
        }
      }).catch((error) => {

      })
    },
    cancelConfig: function (data) {
      this.$confirm('取消配置？')
          .then(_ => {
            this.dialogFormVisible = false
          })
          .catch(_ => {});
    },
    addConfig: function (){
      this.option = 'add'
      this.dialogFormVisible = true
    },
    //  todo 这里应该调用后台api更新，方便展示效果就用本地数据更新
    completeConfig: function (data){
      this.dialogFormVisible = false
      if (data.class == 'add') {
        this.configTable.push(data.item)
      } else {
        this.configTable[this.nowOptionIndex] = data.item
      }
    }
  }
}
</script>

<style scoped>
.config-page{
  background:url("../../assets/background/homepage.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  margin-top: 0px;/*上边距*/
  margin-left: -30px;/*左边距*/
  margin-right: 30px;
  background-size:100% 100%;
}

.addBtn{
  display: flex;
  margin-top: 10px;
  justify-content: right;
}
</style>
